<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>应用市场登录页</title>
    <script src="../../../static/kaige/js/szload.js"></script>
    <style>
        .kaige-login-body .layui-form-item {
            position: relative
        }

        .kaige-login-icon {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2
        }

        .kaige-login-body .layui-form-item .layui-input {
            padding-left: 38px
        }

        .kaige-login-codeimg {
            max-height: 38px;
            width: 100%;
            cursor: pointer;
            box-sizing: border-box
        }

        .kaige-login-other {
            position: relative;
            font-size: 0;
            line-height: 38px;
            padding-top: 20px
        }

        .kaige-login-other>* {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            font-size: 14px
        }

        .kaige-login-other .layui-icon {
            position: relative;
            top: 2px;
            font-size: 26px
        }

        .kaige-login-other a:hover {
            opacity: .8
        }

        .kaige-login-jump-change {
            float: right
        }

        .kaige-body {
            background-color: #fff;
        }

        .ndis {
            display: none;
        }
    </style>
</head>

<body>
    <div class="kaige-body">
        <div class="layui-tab" style="margin-top: 0;" lay-filter="syslogin">
            <ul class="layui-tab-title">
                <li class="layui-this">短信登录</li>
                <li>密码登录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form kaige-login-body">
                        <div class="layui-form-item">
                            <label class="kaige-login-icon layui-icon layui-icon-username"></label>
                            <input type="text" name="username" id="smsmobile" lay-verify="required" placeholder="手机号"
                                class="layui-input">
                            <input type="hidden" name="type" value="sms" />
                            <input type="hidden" name="platform" value="5" />
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <label class="kaige-login-icon layui-icon layui-icon-vercode"></label>
                                    <input type="text" name="smscaptcha" id="captcha_sms" placeholder="验证码"
                                        class="layui-input">
                                </div>
                                <div class="layui-col-xs6">
                                    <div style="margin-left:3px;">
                                        <img src="" id="captcha_smsimg" onclick="setsmsCaptcha()" title="点击更换验证码"
                                            style="width:100%;height:38px; cursor:pointer;" />
                                        <input type="hidden" id="captcha_smskey" name="smskey">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <label class="kaige-login-icon layui-icon layui-icon-password"></label>
                                    <input type="text" name="smscode" placeholder="短信验证码" class="layui-input">
                                </div>
                                <div class="layui-col-xs6">
                                    <div style="margin:6px auto auto 5px;">
                                        <button type="button" class="layui-btn layui-btn-sm layui-bg-red"
                                            style="background-color: #0176c0; border-radius: 19px;"
                                            id="send_sms_id">发送短信<span id="miaotext"></span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 20px;">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="smslogin" id="smslogin"
                                style="background-color: #0176c0; border-radius: 19px;">登 录</button>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <form class="layui-form kaige-login-body">
                        <div class="layui-form-item">
                            <label class="kaige-login-icon layui-icon layui-icon-username"></label>
                            <input type="text" name="username" placeholder="帐户/手机号" class="layui-input">
                            <input type="hidden" name="type" value="pass" />
                        </div>
                        <div class="layui-form-item">
                            <label class="kaige-login-icon layui-icon layui-icon-password"></label>
                            <input type="password" name="password" placeholder="密码" class="layui-input">
                        </div>
                        <div class="layui-form-item" id="captcha_div">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <label class="kaige-login-icon layui-icon layui-icon-vercode"></label>
                                    <input type="text" name="captcha" id="captcha_ipt" placeholder="验证码"
                                        class="layui-input">
                                </div>
                                <div class="layui-col-xs6">
                                    <div style="margin-left:3px;">
                                        <img src="" id="captcha_img" onclick="setCaptcha()" title="点击更换验证码"
                                            alt="captcha" style="width:100%;height:38px; cursor:pointer;" />
                                        <input type="hidden" id="captcha_key" name="key">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 20px;">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="mlogin" id="mlogin"
                                style="background-color: #0176c0; border-radius: 19px;">登 录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        load_init_js(function () {
            layui.config({
                base: szoapcpath + '/static/kaige/layuiextend/'
            }).use(['element', 'table', 'form', 'layer', 'kaige'], function () {
                var element = layui.element,
                    layer = layui.layer,
                    table = layui.table,
                    form = layui.form,
                    kaige = layui.kaige,
                    $ = layui.$;
                var smsmiao = 60, smstime = null;
                // 获取验证码
                function getCaptcha(type) {
                    szoa.ajax({
                        url: '/loginstore/yuncode',
                        //async: true,
                        success: function (res) {
                            if (res.status) {
                                var d = res.data;
                                if (d.status) {
                                    switch (type) {
                                        case 'sms':
                                            $('#captcha_smsimg').attr('src', d.data.img);
                                            $('#captcha_smskey').val(d.data.key);
                                            break;
                                        case 'pass':
                                            $('#captcha_img').attr('src', d.data.img);
                                            $('#captcha_key').val(d.data.key);
                                            break;
                                    }
                                }
                            }
                        }
                    });
                };
                form.render();

                let ssiobj = $('#send_sms_id');
                let miaotext = $('#miaotext');
                ssiobj.on('click', function (e) {
                    let mobile = $('#smsmobile').val();
                    let captcha_sms = $('#captcha_sms').val();
                    let captcha_smskey = $('#captcha_smskey').val();
                    if (!mobile) {
                        layer.msg('请输入手机号', { offset: 't' });
                        return false;
                    }
                    if (!captcha_sms) {
                        layer.msg('请输入验证码', { offset: 't' });
                        return false;
                    }
                    if (!captcha_smskey) {
                        layer.msg('请输入验证码', { offset: 't' });
                        return false;
                    }

                    if (mobile && captcha_sms && captcha_smskey) {
                        smsmiao = 60;
                        ssiobj.addClass('layui-btn-disabled');
                        ssiobj.attr('disabled',true);
                        miaotext.html(smsmiao);
                        smstime = setInterval(function () {
                            if (smsmiao > 0) {
                                miaotext.html(smsmiao);
                                smsmiao--;
                            } else {
                                clearInterval(smstime);
                                ssiobj.removeClass('layui-btn-disabled');
                                ssiobj.removeAttr('disabled');
                                miaotext.html('');
                            }
                        }, 1000);
                        $.ajax({
                            url: '/loginstore/yunsms',
                            type: 'POST',
                            data: { mobile: mobile, smscaptcha: captcha_sms, smskey: captcha_smskey },
                            success: function (res) {
                                if (res.status) {
                                    layer.msg(res.data.msg);
                                } else {
                                    layer.msg(res.msg);
                                }
                            }
                        });
                    }
                });

                getCaptcha('sms');
                //更改验证码图片
                window.setCaptcha = function () {
                    $('#captcha_ipt').val("");
                    getCaptcha('pass');
                };

                window.setsmsCaptcha = function () {
                    $('#captcha_sms').val("");
                    getCaptcha('sms');
                };

                element.on('tab(syslogin)', function (obj) {
                    switch (obj.index) {
                        case 0:
                            getCaptcha('sms');
                            break;
                        case 1:
                            getCaptcha('pass');
                            break;
                    }
                });

                //提交
                form.on('submit(smslogin)', function (data) {
                    $("#smslogin").addClass('layui-btn-disabled');
                    szoa.post('/loginstore/index', data.field, function (res) {
                        loginsuess(res, 'sms');
                    });
                    return false;
                });
                form.on('submit(mlogin)', function (data) {
                    $("#mlogin").addClass('layui-btn-disabled');
                    szoa.post('/loginstore/index', data.field, function (res) {
                        loginsuess(res, 'pass');
                    });
                    return false;
                });

                function loginsuess(res, type) {
                    if (!res.status) {
                        layer.msg(res.msg);
                    } else {
                        var d = res.data;
                        layer.msg(d.msg);
                        if (d.status) {
                            szoa.setCache('yun_token', d.data.token, 28800);
                            szoa.setCache('yun-userinfo', JSON.stringify(d.data.userinfo), 28800);
                            setTimeout(function () {
                                parent.location.reload();
                            }, 1500);
                        } else {
                            if (type == 'sms') {
                                $("#smslogin").removeClass('layui-btn-disabled');
                                setsmsCaptcha();
                            } else if (type == 'pass') {
                                $("#mlogin").removeClass('layui-btn-disabled');
                                setCaptcha();
                            }
                        }
                    }
                }

            });
        });
    </script>

</body>

</html>